<template>
  <div class="container1">
    <!-- 上半部分 -->
    <div class="top">
      <div class="top-block1">
        <dv-border-box-10 class="one shang" :color="['#708CD2','#708CD2']">
          <p>两院院士</p>
          <p><span>6</span>名</p>
        </dv-border-box-10>
      </div>
      <div class="top-block2">
        <dv-border-box-10 class="one shang" :color="['#708CD2','#708CD2']">
          <p>千人计划</p>
          <p><span>12</span>名</p>
        </dv-border-box-10>
      </div>
      <div class="top-block3">
        <dv-border-box-10 class="one shang" :color="['#708CD2','#708CD2']">
          <p>万人计划</p>
          <p><span>14</span>名</p>
        </dv-border-box-10>
      </div>
      <div class="top-block4">
        <dv-border-box-10 class="one shang" :color="['#708CD2','#708CD2']">
          <p>长江学者</p>
          <p><span>55</span>名</p>
        </dv-border-box-10>
      </div>
    </div>


    <!-- 下半部分 -->
    <div class="bottom">
      <!-- 下面三小块 -->
      <div class="bottom-block1">
        <dv-border-box-10 class="one xia" :color="['#708CD2','#708CD2']">
          <p>专职教师</p>
          <p><span>379</span>名</p>
        </dv-border-box-10>
       </div>
      <div class="bottom-block2">
        <dv-border-box-10 class="one xia" :color="['#708CD2','#708CD2']">
          <p>师生比</p>
          <p><span>1/12</span></p>
        </dv-border-box-10>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TeachingTop',
}
</script>

<style scoped>
.container1 {
  color:#ffffff;
  font-size: 17px;
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%; /* 设置容器高度 */
  width: 100%;
}

.top,
.bottom {
  flex: 1; /* 上下均分 */
  display: flex;
}

.top-block1,.top-block2,.top-block3,.top-block4,
.bottom-block1,.bottom-block2 {
  height: 63px;
  flex:1;
  border-radius: 10px;
  margin: 10px;
}
.one{
  padding: 10px;
}
.shang span{
  color: #79E2F9;
  font-weight: bold;
  padding-left: 35px;
}
.top-block1{
  margin-left: 2px;
}
.top-block2{
  /* background-color: rgb(212, 241, 175); */
  margin-left: 0px;
}
.top-block3{
  /* background-color: rgb(241, 226, 175); */
  margin-left: 0px;
}
.top-block4{
  /* background-color: rgb(247, 173, 82); */
  margin-left: 0px;
  margin-right: 2px;
}

.xia{
  padding: 8px;
  padding-left: 20px;
}
.xia span{
  color: #79E2F9;
  font-size: 25px;
  font-weight: bold;
  padding-left: 80px;
}
.bottom-block1{
  /* background-color: rgb(2, 124, 30); */
  margin-top: 0px;
  margin-left: 2px;
}
.bottom-block2{
  /* background-color: rgb(197, 212, 201); */
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 2px;
}
</style>
